<template>
    <div>

        <div ref="div1" style="width: 100px; height: 100px; background: red; position: absolute; top: 50px; left: 50px;">
        </div>
        <div ref="div2"
            style="width: 100px; height: 100px; background: blue; position: absolute; top: 150px; left: 150px;"></div>
        <svg style="position: absolute; width: 100%; height: 100%;">
            <line ref="line" x1="50%" y1="50%" x2="50%" y2="50%" style="stroke:black;stroke-width:2" />
        </svg>
    </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';

let div1 = ref<HTMLDivElement|null>(null);
let div2 = ref<HTMLDivElement|null >(null);
let line = ref<HTMLLIElement|null>(null);
onMounted(() => {
    const div1Center = div1.value!.getBoundingClientRect();
    const div2Center = div2.value!.getBoundingClientRect();

    line.value!.setAttribute('x1', div1Center.x+"");
    line.value!.setAttribute('y1', div1Center.y+"");
    line.value!.setAttribute('x2', div2Center.x+"");
    line.value!.setAttribute('y2', div2Center.y+"");
})

</script>

<style scoped></style>